<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 引入外部header -->
<head th:include="/header.html"/>
<body>
<section class="content">
    <form>
        <div class="form-group">
            <label for="title" class="col-sm-1 control-label"><i
                    class="required-label fa fa-asterisk"></i>名称：</label>
            <div class="col-sm-2">
                <input name="title" id="title" placeholder="请输入名称(cr)" type="text" class="form-control"
                       required="required">
            </div>
        </div>
        <!-- 表格 -->
        <div class="form-group">
            <table id="dataGrid" class="table table-hover" style="border: 1px solid #424141;">
                <tbody id="content">
                </tbody>
            </table>
        </div>
    </form>

    <div class="alipay">
        <h2>支付宝支付测试</h2>
        <form class="layui-form layui-form-pane1" method="post" action="/tool/pay/ali/pay" lay-filter="first">
            <div class="layui-form-item">
                <label class="layui-form-label">订单号：</label>
                <div class="layui-input-block ">
                    <input type="text" name="registerId" lay-verify="required|title" lay-reqText="订单号不能为空" required
                           placeholder="请输入订单号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required|title" lay-reqText="订单名称不能为空" required
                           placeholder="请输入订单名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="submit" onclick="">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</section>
<!-- 引入外部js -->
<div th:include="/footer.html"/>
<script type="text/javascript">
    $(function () {
        var aa = $("#dataGrid").bootstrapTable({
            url: '/task/get',
            method: 'get',
            toolbar: true, //工具按钮用哪个容器,'#toolbar' 自定义按钮(组)
            striped: true, //是否显示行间隔色
            // // cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            // sortable: false, //是否启用排序
            // // sortOrder: "asc", //排序方式
            // // queryParams: oTableInit.queryParams, //传递参数（*）
            // sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            // pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            // // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

            // showRefresh: true, //是否显示刷新按钮
            // // minimumCountColumns: 2, //最少允许的列数，默认一列
            showColumns: true, //是否显示所有的列
            // clickToSelect: true, //是否启用点击选中行
            // height: 500, //行高，如果没有设置，自动设置，但是设置之后表头重复
            uniqueId: "title", //每一行的唯一标识，一般为主键列
            // showToggle: true, //是否显示详细视图和列表视图的切换按钮，数据竖行排列，无大用
            // cardView: true, //是否显示详细视图，数据纵向显示
            detailView: true, //父子表
            columns: [
                // { checkbox: true },
                {
                    field: 'title',
                    title: '大标题'
                }, {
                    field: 'key',
                    title: '小标题'
                }, {
                    field: 'value',
                    title: '值'
                }],
            // 注册加载子表的事件。注意下这里的三个参数！
            // onExpandRow: function(index, row, $detail) {
            // 	oInit.InitSubTable(index, row, $detail);
            // }
        });
    });
</script>
<style>
    .body {
        margin: 0;
        padding: 0;
    }

    .table > tbody > tr > td {
        /* border: 0px; */
        text-align: center;
    }

    .bootstrap-table .table thead > tr > th {
        text-align: center;
    }

    .table thead {
        background: #ebeaea;
        height: 22px
    }

    .alipay{
        margin-top: 20px;
    }
</style>
</body>
</html>
